<template>
  <div class="container">
    <el-row>
      <el-col>
        <el-row type="flex">
          <el-col>【题型】:{{ questionType }}</el-col>
          <el-col>【编号】:{{ questionsInfo.id }}</el-col>
          <el-col>【难度】:{{ difficulty }} </el-col>
          <el-col>【标签】:{{ questionsInfo.tags }}</el-col>
        </el-row>
        <el-row type="flex">
          <el-col>【学科】:{{ questionsInfo.subjectName }}</el-col>
          <el-col>【目录】:{{ questionsInfo.catalogID }}</el-col>
          <el-col>【方向】:{{ questionsInfo.direction }}</el-col>
          <el-col></el-col>
        </el-row>
      </el-col>
      <el-col>
        <el-row>
          <el-col>
            <el-row>
              <el-col>
                <span>【题干】:</span>
              </el-col>
              <el-col style="padding-left: 10px">
                <span
                  v-html="questionsInfo.question"
                  style="color: blue"
                ></span>
                <el-row>
                  <el-col v-if="questionType == `单选`">
                    <span>单选题 选项：（以下选中的选项为正确答案）</span><br />
                    <el-radio-group :value="1">
                      <el-radio
                        v-for="(item, index) in questionsInfo.options"
                        :key="index"
                        :label="item.isRight"
                        :title="item.code"
                      >
                        {{ item.code }} :
                        {{ item.title }}
                      </el-radio>
                    </el-radio-group>
                  </el-col>
                  <el-col v-if="questionType == '多选'">
                    <span>多选题 选项：（以下选中的选项为正确答案）</span>
                    <el-checkbox-group :value="[1]">
                      <el-checkbox
                        v-for="(item, index) in questionsInfo.options"
                        :key="index"
                        :label="item.isRight"
                        >{{ item.title }}</el-checkbox
                      >
                    </el-checkbox-group>
                  </el-col>
                  <!-- 简答题只需要题干 -->
                  <el-col v-if="questionType == '简答'">简答</el-col>
                </el-row>
              </el-col>
            </el-row>
          </el-col>
          <el-col></el-col>
        </el-row>
      </el-col>
      <el-col>
        <el-row>
          <el-col>
            【参考答案】
            <el-button type="danger" size="small" @click="showvideo = true"
              >视频答案预览</el-button
            >
          </el-col>
          <el-col>
            <video
              src="https://v-cdn.zjol.com.cn/277003.mp4"
              controls="controls"
              v-if="showvideo"
            ></video>
          </el-col>
        </el-row>
      </el-col>
      <el-col>
        <el-row>
          <el-col>【答案解析】</el-col>
          <el-col>
            <span v-html="questionsInfo.answer"></span>
          </el-col>
        </el-row>
      </el-col>
      <el-col>
        <el-row>
          <el-col>【题目备注】</el-col>
          <el-col>
            <span v-html="questionsInfo.remarks"></span>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { questionType, difficulty } from "@/api/hmmm/constants";
import { detail } from "@/api/hmmm/questions";
export default {
  props: {
    currentId: {
      type: Number,
      required: true,
    },
    isChoice: {
      type: Boolean,
      required: true,
    },
  },
  data() {
    return {
      questionsInfo: {},
      showvideo: false,
    };
  },
  created() {
    /* 判断当前页面 基础题目 页面和 精选页面 */
    this.isChoice ? console.log(`精选题库`) : console.log(`基础题库`);
    this.loadforfill();
  },
  methods: {
    loadforfill() {
      this.isChoice ? this.queryQ_choice() : this.queryQ_list();
    },
    /* 基础题库回填数据 */
    async queryQ_list() {
      console.log(this.currentId);
      const { data: res } = await detail({ id: this.currentId });
      this.questionsInfo = { ...res };
      console.log(this.questionsInfo);
    },
    /* 精选题库回填数据 */
    async queryQ_choice() {
      console.log(`精选题库id`, this.currentId);
      const { data: res } = await detail({ id: this.currentId });
      this.questionsInfo = { ...res };
    },
  },
  computed: {
    /* 题型 */
    /* value 转 label */
    questionType() {
      const Type = questionType.find((item) => {
        return item.value == this.questionsInfo.questionType;
      });
      return Type ? Type.label : `未知`;
    },
    difficulty() {
      // 难度 更新页面(异步)
      const difficult = difficulty.find((item) => {
        return item.value == this.questionsInfo.difficulty;
      });
      return difficult ? difficult.label : `未知`;
    },
  },
};
</script>

<style scoped lang='scss'>
.container {
  & > .el-row {
    & > .el-col {
      margin-top: 20px;
      & > .el-row {
        & > .el-col {
          margin-top: 10px;
        }
      }
    }
  }
}
.el-radio-group {
  padding: 5px;
  display: flex;
  flex-direction: column;
  .el-radio {
    padding: 5px;
  }
}
.el-checkbox-group {
  padding: 5px;
  display: flex;
  flex-direction: column;
  .el-checkbox {
    padding: 5px;
  }
}
</style>
